<template>
    <div class="contents">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="lefts">测试标题</span>
                <el-button @click="createTable" class="rights" type="text">添加</el-button>
            </div>
            <el-empty v-if="tableData.length <= 0" description="查询数据为空"></el-empty>
            <el-table :data="tableData" v-if="tableData.length > 0" style="width: 100%">
                <el-table-column prop="id" label="ID" width="50"></el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button @click="viewClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" background :page-size="10" hide-on-single-page
                @current-change="PageChange" :total="count">
            </el-pagination>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            count:0,
            page:0,
            tableData:[],
        }
    },
    created() {
        this.InitData()
    },
    methods: {
        // 页面初始化
        InitData() {

        },
        // 翻页事件
        PageChange(e){
            this.page = e
            this.InitData()
        },
        // 创建按钮点击事件
        createTable(){

        },
    },
}
</script>
<style lang="less" scoped>
.rights{
    float: right;
    padding: 3px;
}
</style>
